// 创建一个类组件，替换原来的App.js（之前的是函数组件）
import React from 'react'
import './App.css';
import Child1 from './components/Child1'
import Child2 from './components/Child2'
import Base from './components/Base'

export default class App extends React.Component {
  // props:组件接受到的值
  // state是组件内部的数据，props是外部传进来的数据
  // 修改state需要通过setState方法，props是只读属性（read only property）
  constructor() {
    super();
    this.state = {
      age: 18,
      msg: '',
      isShow: true
    }
  }
  fn1(val) {
    console.log(val);
  }
  changeAge() {
    this.setState({
      age: 20
    })
  }
  toggle() {
    this.setState({
      isShow: !this.state.isShow
    })
  }
  render() {
    let child = <Child1
      name="曹县"
      age={this.state.age}
      fn1={this.fn1}
    ></Child1>
    return (
      <div>
        <div>我的年龄：{this.state.age}</div>
        <button onClick={this.changeAge.bind(this)}>修改age</button>
        {/* 以标签的自定义属性的形式传值 */}
        <div>{this.state.isShow ? child : null}</div>
        <button onClick={this.toggle.bind(this)}>toggle</button>
        <hr></hr>
        <Child2></Child2>
        <Base></Base>
      </div>
    )
  }
}